6-2.Tag Helper

ASP.NET Core MVC 入門教學

上一節介紹完Html Helper後,這一節來介紹ASP.NET CORE MVC新出的Tag Helper

我們先從之前產生的範例碼來找一下哪個是Tag Helper

<label asp-for="Title" class="control-label"></label>
<input asp-for="Title" class="form-control" />

其中asp-for就是Tag Helper

可以看到Tag Helper是依附在原生地html上,再加上asp-for,所以整體的閱讀性跟javascript的搭配性就會很好

這也是我個人比較喜歡的寫法,我個人是能像原生就盡量像原生寫法的那一派,那當然也有人不喜歡,這其實是個人選擇,喜歡哪個就用哪個

如果今天要將上面改成Html Helper會長什麼樣子呢?

@Html.LabelFor(model => model.Title, new { @class = "control-label" })
@Html.TextBoxFor(model => model.Title, new { @class = "form-control" })

我個人覺得寫起來很繁瑣,這大概也就是為什麼之後會出現Tag Helper

而其他Html Helper不繁瑣的地方,似乎也剛好沒出Tag Helper,例如上一節講到的@Html.Raw

或許微軟本來就不是要完全取代Html Helper,而是把一些比較繁瑣的Html Helper,另外出一個Tag Helper寫法來取代

而Tag Helper的好處跟Html Helper也是一樣的,就是自動幫你產生對應的程式碼,防止你出錯或方便你日後的維護

再舉個例子

<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="News" asp-action="Index">NewsIndex</a>
</li>

這個頂端的連結也是利用Tag Helper產生的,這時候自動幫你產生的連結會是

<a class="nav-link text-dark" href="/News">NewsIndex</a>

那自己打跟Tag Helper產生有什麼差呢?假設我今天改了一下路由設定

[HttpGet("News/abc")]
// GET: News
public async Task<IActionResult> Index()
{

}

這時就會發現連結自動改成

<a class="nav-link text-dark" href="/News/abc">NewsIndex</a>

這就是好處之一,他會幫你自動產生正確的連結,而不用自己回頭來Html修改連結

這邊算是有點拋磚引玉的講一下,還有很多功能就留給大家自己Google了,網路上很多,其實用到再看就好,我這邊就不再多講了




Copyright © 凱哥寫程式 2022 | Powered by TalllKai ❤